﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <style>
        body {
            background-color: #f5f7fa;
            padding: 15px;
            overflow-x: hidden;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;
        }
        .layui-form-label {
            width: 100px;
            font-weight: 500;
        }
        .layui-table-cell {
            height: auto;
            line-height: 28px;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .layui-card {
            box-shadow: 0 2px 10px rgba(0,0,0,.05);
            border-radius: 4px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        .layui-card:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,.08);
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            position: relative;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #f0f0f0;
        }
        .layui-card-body {
            padding: 20px;
            overflow: hidden;
        }
        .search-form {
            padding: 15px 0;
            background-color: #fff;
            border-radius: 4px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        .search-form .layui-inline {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .layui-btn-primary {
            border-color: #e6e6e6;
        }
        .layui-table-tool {
            padding-top: 12px;
            padding-bottom: 12px;
            background-color: #fafafa;
        }
        .layui-table-page {
            text-align: right;
            padding: 10px 0;
        }
        .layui-badge {
            padding: 4px 8px;
            border-radius: 3px;
            font-weight: 500;
        }
        .header-right {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
        }
        .header-icon {
            font-size: 18px;
            margin-left: 15px;
            cursor: pointer;
            color: #1E9FFF;
            transition: all 0.3s;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 50%;
        }
        .header-icon:hover {
            color: #0d8bdd;
            background-color: rgba(30, 159, 255, 0.1);
        }
        /* 表格容器样式 */
        .table-container {
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            border-radius: 4px;
        }
        /* 自定义表头和单元格对齐 */
        .layui-table th, .layui-table td {
            text-align: center !important;
        }
        /* 防止表格视图出现滚动条 */
        .layui-table-view {
            overflow: hidden !important;
            border-radius: 4px;
        }
        /* 防止表格体出现滚动条 */
        .layui-table-body {
            overflow: hidden !important;
        }
        /* 确保表格适应宽度 */
        .layui-table {
            width: 100% !important;
        }
        /* 工具栏样式 */
        .toolbar {
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .toolbar-left {
            display: flex;
            gap: 10px;
        }
        .toolbar-right {
            display: flex;
            gap: 10px;
        }
        /* 美化按钮 */
        .layui-btn {
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
            transition: all 0.3s;
        }
        .layui-btn:hover {
            box-shadow: 0 2px 6px rgba(0,0,0,.15);
            opacity: 0.9;
        }
        .layui-btn-normal {
            background-color: #1E9FFF;
        }
        .layui-btn-danger {
            background-color: #FF5722;
        }
        .layui-btn-xs {
            height: 24px;
            line-height: 24px;
            padding: 0 8px;
            font-size: 12px;
        }
        /* 表单样式美化 */
        .layui-input, .layui-select, .layui-textarea {
            border-radius: 3px;
            border-color: #e6e6e6;
            transition: all 0.3s;
        }
        .layui-input:hover, .layui-select:hover, .layui-textarea:hover,
        .layui-input:focus, .layui-select:focus, .layui-textarea:focus {
            border-color: #1E9FFF;
            box-shadow: 0 0 0 2px rgba(30, 159, 255, 0.1);
        }
        /* 弹窗样式美化 */
        .layui-layer {
            border-radius: 4px !important;
        }
        .layui-layer-title {
            background-color: #1E9FFF !important;
            color: #fff !important;
            font-weight: bold;
            border-radius: 4px 4px 0 0 !important;
            border-bottom: none !important;
        }
        .layui-layer-setwin .layui-layer-close1 {
            background-position: 1px -40px;
            cursor: pointer;
        }
        /* 生成编码按钮 */
        .code-gen-btn {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            background-color: #1E9FFF;
            color: #fff;
            height: 38px;
            line-height: 38px;
            padding: 0 10px;
            border: none;
            border-radius: 0 2px 2px 0;
        }
        .code-gen-btn:hover {
            background-color: #0d8bdd;
        }
        /* 状态标签样式 */
        .status-badge {
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-active {
            background-color: #52c41a;
            color: #fff;
        }
        .status-inactive {
            background-color: #d9d9d9;
            color: #666;
        }
        /* 操作按钮美化 */
        .action-btn {
            margin: 0 3px;
        }
        /* 动画效果 */
        @@keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                客户管理
                <div class="header-right">
                    <i class="layui-icon layui-icon-search header-icon" id="toggleSearch" title="显示/隐藏搜索"></i>
                    <i class="layui-icon layui-icon-refresh header-icon" id="refreshPage" title="刷新页面"></i>
                </div>
            </div>
            <div class="layui-card-body">
                <!-- 搜索表单 -->
                <form class="layui-form search-form" lay-filter="searchForm" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">客户编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="CustomerCode" class="layui-input" placeholder="请输入客户编号">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">客户名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="CustomerName" class="layui-input" placeholder="请输入客户名称">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="IsNo">
                                    <option value="">全部</option>
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="toolbar-left">
                        <button type="button" class="layui-btn layui-btn-normal" id="addBtn">
                            <i class="layui-icon layui-icon-add-1"></i> 添加客户
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger" id="batchDeleteBtn">
                            <i class="layui-icon layui-icon-delete"></i> 批量删除
                        </button>
                    </div>
                    <div class="toolbar-right">
                        <button type="button" class="layui-btn layui-btn-primary" id="refreshBtn">
                            <i class="layui-icon layui-icon-refresh"></i> 刷新
                        </button>
                        <button type="button" class="layui-btn layui-btn-warm" id="selectCustomerBtn" style="display:none;">
                            <i class="layui-icon layui-icon-ok"></i> 选择客户
                        </button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <div class="table-container fade-in">
                    <table id="customerTable" lay-filter="customerTable"></table>
                </div>
                
                <!-- 状态模板 -->
                <script type="text/html" id="statusTpl">
                    {{# if(d.isNo === 1){ }}
                    <span class="status-badge status-active">启用</span>
                    {{# } else { }}
                    <span class="status-badge status-inactive">禁用</span>
                    {{# } }}
                </script>
                
                <!-- 操作列模板 -->
                <script type="text/html" id="operationTpl">
                    <a class="layui-btn layui-btn-normal layui-btn-xs action-btn" lay-event="edit">
                        <i class="layui-icon layui-icon-edit"></i> 编辑
                    </a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs action-btn" lay-event="del">
                        <i class="layui-icon layui-icon-delete"></i> 删除
                    </a>
                </script>
            </div>
        </div>
    </div>

    <!-- 添加/编辑表单 -->
    <div id="formContainer" style="display: none; padding: 20px;">
        <form class="layui-form layui-form-pane" lay-filter="customerForm" id="customerForm">
            <input type="hidden" name="Id">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i> 客户编号</label>
                <div class="layui-input-block" style="position: relative;">
                    <input type="text" name="CustomerCode" id="customerCode" required lay-verify="required" placeholder="请输入客户编号" autocomplete="off" class="layui-input">
                    <button type="button" class="code-gen-btn" id="genCodeBtn"><i class="layui-icon layui-icon-refresh"></i> 生成</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-user"></i> 客户名称</label>
                <div class="layui-input-block">
                    <input type="text" name="CustomerName" required lay-verify="required" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-list"></i> 客户类型</label>
                <div class="layui-input-block">
                    <input type="text" name="CustomerType" placeholder="请输入客户类型" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i> 联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="CustomerPhone" placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-auz"></i> 状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="IsNo" value="1" title="启用" checked>
                    <input type="radio" name="IsNo" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submitForm">
                        <i class="layui-icon layui-icon-ok"></i> 提交
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'util'], function() {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.jquery;
            
            // 当前编辑模式（添加/编辑）
            var isEditMode = false;
            
            // 存储当前查询条件
            var currentQueryParams = {
                PageIndex: 1,
                PageSize: 5
            };
            
            // 存储选中的客户
            var selectedCustomer = null;
            
            // 检查是否在iframe中打开
            var isInIframe = (window.self !== window.top);
            
            // 如果在iframe中打开，显示选择客户按钮
            if(isInIframe) {
                $('#selectCustomerBtn').show();
            }
            
            // 生成客户编码
            function generateCustomerCode(callback) {
                // 获取当前所有客户数据
                $.ajax({
                    url: '/CustomerManagement/GetList',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        PageIndex: 1,
                        PageSize: 1000 // 获取足够多的数据以找到最大编码
                    }),
                    success: function(res) {
                        if (res.code === 0 && res.data && res.data.length > 0) {
                            // 提取所有客户编码
                            var codes = res.data.map(function(item) {
                                return item.customerCode || '';
                            }).filter(function(code) {
                                // 只保留C开头的编码
                                return code && code.startsWith('C');
                            });
                            
                            if (codes.length > 0) {
                                // 提取数字部分并找到最大值
                                var maxNum = 0;
                                codes.forEach(function(code) {
                                    var numPart = code.replace(/^C0*/, ''); // 移除C和前导0
                                    var num = parseInt(numPart, 10);
                                    if (!isNaN(num) && num > maxNum) {
                                        maxNum = num;
                                    }
                                });
                                
                                // 生成新编码
                                var nextNum = maxNum + 1;
                                var nextCode = 'C' + nextNum.toString().padStart(5, '0');
                                
                                // 调用回调函数
                                if (typeof callback === 'function') {
                                    callback(nextCode);
                                }
                            } else {
                                // 如果没有编码，从C00001开始
                                if (typeof callback === 'function') {
                                    callback('C00001');
                                }
                            }
                        } else {
                            // 如果没有数据，从C00001开始
                            if (typeof callback === 'function') {
                                callback('C00001');
                            }
                        }
                    },
                    error: function() {
                        layer.msg('获取客户编码失败', {icon: 2});
                        // 默认编码
                        if (typeof callback === 'function') {
                            callback('C00001');
                        }
                    }
                });
            }
            
            // 生成编码按钮点击事件
            $('#genCodeBtn').on('click', function() {
                if (isEditMode) {
                    layer.msg('编辑模式下不能修改客户编码', {icon: 0});
                    return;
                }
                
                layer.msg('正在生成编码...', {icon: 16, time: 0});
                generateCustomerCode(function(code) {
                    $('#customerCode').val(code);
                    layer.closeAll('tips');
                    layer.msg('编码已生成: ' + code, {icon: 1});
                });
            });
            
            // 较为简单的方案，不覆盖layui本身的方法
            // 初始化表格
            var tableIns = table.render({
                elem: '#customerTable',
                url: '/CustomerManagement/GetList',
                method: 'post',
                contentType: 'application/json',
                page: true,
                limits: [5, 10, 20, 50, 100],
                limit: 5,
                cols: [[
                    {type: 'checkbox', fixed: 'left', align: 'center'},
                    {field: 'customerCode', title: '客户编号', width: '15%', align: 'center', 
                     templet: '<div><a href="javascript:;" class="view-customer" data-id="{{d.id}}">{{d.customerCode}}</a></div>'},
                    {field: 'customerName', title: '客户名称', width: '20%', align: 'center'},
                    {field: 'customerType', title: '客户类型', width: '15%', align: 'center'},
                    {field: 'customerPhone', title: '联系电话', width: '15%', align: 'center'},
                    {field: 'isNo', title: '状态', width: '15%', align: 'center', templet: '#statusTpl'},
                    {title: '操作', width: '20%', fixed: 'right', align: 'center', toolbar: '#operationTpl'}
                ]],
                request: {
                    pageName: 'PageIndex',
                    limitName: 'PageSize'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                where: currentQueryParams,
                // 自定义请求处理
                parseData: function(res) {
                    console.log('解析返回数据', res);
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": res.data
                    };
                },
                // 添加自定义请求
                before: function(req) {
                    var currentPage = $(".layui-laypage-curr em").eq(1).text() || 1;
                    req.where.PageIndex = parseInt(currentPage);
                    console.log('发送请求前修改参数', req.where);
                    return req;
                }
            });
            
            // 搜索按钮点击事件
            form.on('submit(searchBtn)', function(data) {
                var searchParams = {};
                
                if (data.field.CustomerCode) {
                    searchParams.CustomerCode = data.field.CustomerCode;
                }
                
                if (data.field.CustomerName) {
                    searchParams.CustomerName = data.field.CustomerName;
                }
                
                if (data.field.IsNo !== "") {
                    searchParams.IsNo = parseInt(data.field.IsNo);
                }
                
                // 添加分页参数
                searchParams.PageIndex = 1;
                searchParams.PageSize = 5;
                
                // 更新当前查询参数
                currentQueryParams = $.extend({}, searchParams);
                
                // 重载表格
                tableIns.reload({
                    where: searchParams,
                    page: {
                        curr: 1
                    }
                });
                
                return false;
            });
            
            // 刷新按钮点击事件
            $('#refreshBtn').on('click', function() {
                // 重置表单
                $('#searchForm')[0].reset();
                form.render();
                
                // 重载表格
                tableIns.reload({
                    where: {
                        PageIndex: 1,
                        PageSize: 5
                    },
                    page: {
                        curr: 1
                    }
                });
                
                // 重置当前查询参数
                currentQueryParams = {
                    PageIndex: 1,
                    PageSize: 5
                };
                
                layer.msg('数据已刷新', {icon: 1});
            });
            
            // 页面刷新按钮点击事件
            $('#refreshPage').on('click', function() {
                location.reload();
            });
            
            // 客户编码点击查看事件
            $(document).on('click', '.view-customer', function() {
                var customerId = $(this).data('id');
                
                // 从表格中获取该行数据
                var tableData = table.cache.customerTable;
                var customerData = null;
                
                for (var i = 0; i < tableData.length; i++) {
                    if (tableData[i].id === customerId) {
                        customerData = tableData[i];
                        break;
                    }
                }
                
                if (customerData) {
                    // 构建详情HTML
                    var detailHtml = '<div style="padding: 20px;">' +
                        '<form class="layui-form layui-form-pane" lay-filter="customerDetailForm">' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label"><i class="layui-icon layui-icon-username"></i> 客户编号</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text" name="CustomerCode" value="' + customerData.customerCode + '" class="layui-input layui-disabled" disabled>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label"><i class="layui-icon layui-icon-user"></i> 客户名称</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text" name="CustomerName" value="' + customerData.customerName + '" class="layui-input layui-disabled" disabled>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label"><i class="layui-icon layui-icon-list"></i> 客户类型</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text" name="CustomerType" value="' + (customerData.customerType || '') + '" class="layui-input layui-disabled" disabled>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label"><i class="layui-icon layui-icon-cellphone"></i> 联系电话</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text" name="CustomerPhone" value="' + (customerData.customerPhone || '') + '" class="layui-input layui-disabled" disabled>' +
                        '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label"><i class="layui-icon layui-icon-auz"></i> 状态</label>' +
                        '<div class="layui-input-block">' +
                        '<input type="text" name="IsNo" value="' + (customerData.isNo === 1 ? '启用' : '禁用') + '" class="layui-input layui-disabled" disabled>' +
                        '</div>' +
                        '</div>' +
                        '</form>' +
                        '</div>';
                    
                    // 打开详情弹窗
                    layer.open({
                        type: 1,
                        title: '<i class="layui-icon layui-icon-read"></i> 客户详情',
                        area: ['500px', '400px'],
                        content: detailHtml,
                        skin: 'layui-layer-molv',
                        anim: 1,
                        resize: false,
                        btn: ['关闭'],
                        btnAlign: 'c'
                    });
                } else {
                    layer.msg('未找到客户数据', {icon: 2});
                }
            });

            // 添加客户按钮点击事件
            $('#addBtn').on('click', function() {
                isEditMode = false;
                
                // 重置表单
                document.getElementById('customerForm').reset();
                
                // 生成客户编码
                generateCustomerCode(function(code) {
                    $('#customerCode').val(code);
                });
                
                // 启用客户编码输入框
                $('#customerCode').attr('disabled', false).removeClass('layui-disabled');
                $('#genCodeBtn').removeClass('layui-btn-disabled').attr('disabled', false);
                
                // 打开添加表单
                layer.open({
                    type: 1,
                    title: '<i class="layui-icon layui-icon-add-1"></i> 添加客户',
                    area: ['500px', '500px'],
                    content: $('#formContainer'),
                    skin: 'layui-layer-molv',
                    anim: 1,
                    resize: false,
                    end: function() {
                        // 关闭窗口时重置表单
                        document.getElementById('customerForm').reset();
                    }
                });
            });
            
            // 批量删除按钮点击事件
            $('#batchDeleteBtn').on('click', function() {
                var checkStatus = table.checkStatus('customerTable');
                var data = checkStatus.data;
                
                if (data.length === 0) {
                    layer.msg('请选择要删除的客户', {icon: 0});
                    return;
                }
                
                layer.confirm('确定要删除选中的 ' + data.length + ' 个客户吗？', {
                    icon: 3,
                    title: '提示',
                    skin: 'layui-layer-molv'
                }, function(index) {
                    // 提取客户ID
                    var ids = data.map(function(item) {
                        return item.id;
                    });
                    
                    // 发送批量删除请求
                    $.ajax({
                        url: '/CustomerManagement/BatchDelete',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function(res) {
                            if (res.success) {
                                layer.msg('批量删除成功', {icon: 1});
                                // 重新加载数据
                                tableIns.reload({
                                    where: {
                                        PageIndex: 1,
                                        PageSize: 5
                                    },
                                    page: {
                                        curr: 1
                                    }
                                });
                            } else {
                                layer.msg('批量删除失败：' + res.message, {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('批量删除请求失败', {icon: 2});
                        }
                    });
                    
                    layer.close(index);
                });
            });
            
            // 表单提交事件
            form.on('submit(submitForm)', function(data) {
                var formData = data.field;
                var url = isEditMode ? '/CustomerManagement/Update' : '/CustomerManagement/Create';
                
                // 转换状态为数字
                formData.IsNo = parseInt(formData.IsNo);
                
                // 如果是新增模式，删除ID字段
                if (!isEditMode) {
                    delete formData.Id;
                }
                
                // 发送请求
                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(res) {
                        if (res.success) {
                            layer.closeAll('page');
                            layer.msg(isEditMode ? '编辑成功' : '添加成功', {icon: 1});
                            // 重新加载数据
                            tableIns.reload({
                                where: {
                                    PageIndex: 1,
                                    PageSize: 5
                                },
                                page: {
                                    curr: 1
                                }
                            });
                        } else {
                            layer.msg((isEditMode ? '编辑' : '添加') + '失败：' + res.message, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg((isEditMode ? '编辑' : '添加') + '请求失败', {icon: 2});
                    }
                });
                
                return false; // 阻止表单默认提交
            });

            // 监听表格工具条事件
            table.on('tool(customerTable)', function(obj) {
                var data = obj.data;
                var layEvent = obj.event;
                
                if (layEvent === 'edit') {
                    // 编辑操作处理
                    isEditMode = true;
                    
                    // 填充表单
                    form.val('customerForm', {
                        "Id": data.id,
                        "CustomerCode": data.customerCode,
                        "CustomerName": data.customerName,
                        "CustomerType": data.customerType || '',
                        "CustomerPhone": data.customerPhone || '',
                        "IsNo": data.isNo
                    });
                    
                    // 禁用客户编码输入框
                    $('#customerCode').attr('disabled', true).addClass('layui-disabled');
                    $('#genCodeBtn').addClass('layui-btn-disabled').attr('disabled', true);
                    
                    // 打开编辑表单
                    layer.open({
                        type: 1,
                        title: '<i class="layui-icon layui-icon-edit"></i> 编辑客户',
                        area: ['500px', '500px'],
                        content: $('#formContainer'),
                        skin: 'layui-layer-molv',
                        anim: 1,
                        resize: false,
                        end: function() {
                            // 关闭窗口时重置表单
                            document.getElementById('customerForm').reset();
                            $('#customerCode').attr('disabled', false).removeClass('layui-disabled');
                            $('#genCodeBtn').removeClass('layui-btn-disabled').attr('disabled', false);
                            isEditMode = false;
                        }
                    });
                } else if (layEvent === 'del') {
                    // 删除操作处理
                    layer.confirm('确定要删除此客户吗？', {
                        icon: 3,
                        title: '提示',
                        skin: 'layui-layer-molv'
                    }, function(index) {
                        // 发送删除请求
                        $.ajax({
                            url: '/CustomerManagement/Delete',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({ id: data.id }),
                            success: function(res) {
                                if (res.success) {
                                    layer.msg('删除成功', {icon: 1});
                                    // 重新加载数据
                                    tableIns.reload();
                                } else {
                                    layer.msg('删除失败：' + res.message, {icon: 2});
                                }
                            },
                            error: function() {
                                layer.msg('删除请求失败', {icon: 2});
                            }
                        });
                        
                        layer.close(index);
                    });
                }
            });

            // 监听页容量选择事件
            table.on('toolbar(customerTable)', function(obj) {
                console.log('工具栏事件:', obj);
                // 如果是页容量下拉菜单变化
                if(obj.event === 'LAYTABLE_COLS' || obj.event.startsWith('LAYTABLE_PAGE_')) {
                    setTimeout(function(){
                        // 获取当前选择的页容量
                        var limit = $('.layui-laypage-limits select').val();
                        // 更新当前查询参数
                        currentQueryParams.PageSize = parseInt(limit);
                        // 重载表格
                        tableIns.reload({
                            where: currentQueryParams
                        });
                        console.log('页容量改变为:', limit);
                    }, 100);
                }
            });

            // 也可以直接监听分页组件的变化
            $(document).on('change', '.layui-laypage-limits select', function() {
                var limit = $(this).val();
                // 更新当前查询参数
                currentQueryParams.PageSize = parseInt(limit);
                // 重载表格
                tableIns.reload({
                    where: currentQueryParams,
                    page: {
                        curr: 1,  // 页容量改变后通常会跳回第一页
                        limit: parseInt(limit)
                    }
                });
                console.log('页容量直接改变为:', limit);
            });

            // 监听表格行单击事件
            table.on('row(customerTable)', function(obj){
                // 获取选中的行数据
                selectedCustomer = obj.data;
                
                // 清除其他行的选中样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            });
            
            // 选择客户按钮点击事件
            $('#selectCustomerBtn').on('click', function(){
                if(!selectedCustomer) {
                    layer.msg('请先选择一个客户', {icon: 0});
                    return;
                }
                
                // 获取父窗口的layer对象
                var parentLayer = parent.layer;
                // 关闭父窗口的当前弹层
                var index = parent.layer.getFrameIndex(window.name);
                parentLayer.close(index);
            });
            
            // 提供给父窗口调用的方法，获取选中的客户
            window.getSelectedCustomer = function() {
                return selectedCustomer;
            };
        });
    </script>
</body>
</html>
